<template>
  <div class="menu-container">
    <a-card class="card">
      <a-form
        :model="formState"
        name="basic"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 16 }"
        autocomplete="off"
        layout="inline"
        @finish="getTableList"
        ref="formRef"
      >
        <a-form-item label="菜单名称" name="menuName">
          <a-input
            v-model:value="formState.menuName"
            placeholder="请输入菜单名称"
          />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" html-type="submit">查询</a-button>
        </a-form-item>
        <a-form-item>
          <a-button @click="onReset">重置</a-button>
        </a-form-item>
      </a-form>
    </a-card>
    <a-card class="card depart-table">
      <div class="add-depart">
        <a-button type="primary" @click="onAddMenu">新增菜单</a-button>
      </div>
      <a-table
        :columns="columns"
        :data-source="menuList"
        :loading="loading"
        :pagination="false"
        bordered
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <div class="action-btn">
              <a-button type="primary" size="small" @click="onEditMenu(record)"
                >编辑</a-button
              >
              <a-button type="danger" size="small">删除</a-button>
            </div>
          </template>
          <template v-else-if="column.key === 'rightType'">
            {{ RIGHTTYPE[record.rightType].text }}
          </template>
        </template>
      </a-table>
    </a-card>
    <MenuDrawer
      @update:visible="toggleDrawer"
      :visible="drawerVisible"
      :sys-menu="selectSysMenu"
      :menuList="menuList"
    />
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { FormInstance } from "ant-design-vue";
import { ISysMenu } from "@/type/System";
import { RIGHTTYPE } from "@/constants/system";
import MenuDrawer from "./components/menuDrawer.vue";
import SystemService from "@/service/systemService";

const selectSysMenu = ref<ISysMenu | any>(null);
const drawerVisible = ref(false);
const menuList = ref<ISysMenu[]>([]);
const loading = ref(false);
const formState = ref({
  menuName: "",
});
const formRef = ref<FormInstance>();

const columns = [
  {
    title: "权限名称",
    dataIndex: "title",
    key: "title",
  },
  {
    title: "权限类型",
    dataIndex: "rightType",
    key: "rightType",
  },
  {
    title: "权限路由",
    dataIndex: "route",
    key: "route",
  },
  {
    title: "权限标识",
    dataIndex: "logotype",
    key: "logotype",
  },
  {
    title: "操作",
    key: "action",
    width: 180,
    fixed: "right",
  },
];

const toggleDrawer = () => {
  drawerVisible.value = !drawerVisible.value;
};
const getTableList = async () => {
  loading.value = true;
  const res = await SystemService.getMenuRight();
  menuList.value = res;
  loading.value = false;
};
const onReset = () => {
  formRef.value?.resetFields();
};
const onAddMenu = () => {
  selectSysMenu.value = null;
  toggleDrawer();
};
const onEditMenu = (record: ISysMenu) => {
  selectSysMenu.value = record;
  toggleDrawer();
};
onMounted(() => {
  getTableList();
});
</script>
<style lang="less" rel="stylesheet/less" scoped>
.menu-container {
  margin: 6px;
  height: calc(100% - 50px);
  display: flex;
  flex-direction: column;

  .card {
    overflow: scroll;
    box-shadow: 0px 0px 12px rgb(0 0 0 / 12%);
    border-radius: 4px;
    margin: 8px 5px;
  }
  .depart-table {
    flex: 1;

    .add-depart {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 16px;
    }

    .action-btn {
      display: flex;
      justify-content: space-around;
    }
  }
}
</style>
